<template>
    <div class="broadcast-manage">
      <div class="header">
        <el-button type="primary" @click="handleAdd">添加</el-button>
      </div>
      <el-table
        :data="tableData"
        style="width: 100%"
        border
        stripe
        empty-text="暂无广播数据"
      >
        <el-table-column prop="id" label="ID" width="60" align="center" />
        <el-table-column
          prop="broadCastTypeId"
          label="广播类型"
          align="center"
          :formatter="typeFormatter"
        />
        <el-table-column prop="wardCode" label="床位" align="center" />
        <el-table-column prop="broadCastContent" label="广播内容" />
        <el-table-column prop="templateName" label="模板名称" align="center" />
        <el-table-column label="操作" width="150" align="center">
          <template #default="scope">
            <el-button size="small" @click="handleEdit(scope.row)">编辑</el-button>
            <el-divider direction="vertical" />
            <el-button size="small" type="danger" @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </template>
  
  <script setup lang="ts">
  import { ref, onMounted } from 'vue'
  import { ElMessage } from 'element-plus'
  import axios from 'axios'
  import { useRouter } from 'vue-router'
  
  interface BroadCastItem {
    id: number
    broadCastTypeId: number
    broadCastTypeName: string
    wardCode: string
    broadCastContent: string
    templateName: string
  }
  
  const tableData = ref<BroadCastItem[]>([])
  const router = useRouter()
  
  const typeMap: Record<string, string> = {
    '1': '健康宣教',
    '2': '通知公告',
    '3': '紧急通知',
    '4': '康复指导',
    '5': '饮食提醒'
  }
  const typeFormatter = (row: BroadCastItem) => typeMap[String(row.broadCastTypeId)] || row.broadCastTypeId
  
  const getBroadCastManage = async () => {
    try {
      const res = await axios.get('/api/HealthEducation')
      if (res.data && res.data.data) {
        tableData.value = res.data.data
      } else {
        ElMessage.error('获取数据失败')
      }
    } catch (e) {
      ElMessage.error('请求出错')
    }
  }
  
  const handleAdd = () => {
    router.push({ name: 'BroadCastManagetwo' })
  }
  
  const handleEdit = (row: BroadCastItem) => {
    router.push({ name: 'BroadCastManagetwo', query: { id: row.id } })
  }
  
  const handleDelete = (row: BroadCastItem) => {
    ElMessage.info(`删除功能待实现，id: ${row.id}`)
  }
  
  onMounted(() => {
    getBroadCastManage()
  })
  </script>
  
  <style scoped>
  .broadcast-manage {
    padding: 24px;
    background: #fff;
    border-radius: 8px;
    min-height: 400px;
  }
  .header {
    margin-bottom: 16px;
    display: flex;
    justify-content: flex-start;
  }
  </style>